<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Animations: Warps</title>
    <meta name="description" content="Animations: Warps - A-Frame">
    <script src="../../../dist/aframe-master.js"></script>
  </head>
  <body>
    <a-scene background="color: #ECECEC">
      <!-- A series of cylinders that scale in succession to create "warp" animations -->
      <!-- Warps 1 -->
      <a-entity position="-2 1.5 -10">
        <!-- Green -->
        <a-entity scale="1 0 1" animation="property: scale; to: 1 1 1; dur: 2000">
          <a-cylinder position="0 2 0" radius="2" height="2" color="#7BC8A4" open-ended="true" side="double"
                      scale="1 1.25 1" animation="property: scale; to: 1 0 1; dur: 2000">
          </a-cylinder>

          <a-cylinder position="0 -2 0" radius="2" height="2" color="#7BC8A4" open-ended="true" side="double"
                      scale="1 1.25 1" animation="property: scale; to: 1 0 1; dur: 2000">
          </a-cylinder>
        </a-entity>

        <!-- Orange -->
        <a-entity scale="0.9 0.9 0.9" animation="property: scale; to: 0.9 1 0.9; delay: 200; dur: 2000">
          <a-cylinder position="0 2 0" radius="2" height="2" color="#F16745" open-ended="true" side="double"
                      scale="1 1.25 1" animation="property: scale; to: 1 0 1; delay: 200; dur: 2000"></a-cylinder>

          <a-cylinder position="0 -2 0" radius="2" height="2" color="#F16745" open-ended="true" side="double"
                      scale="1 1.25 1" animation="property: scale; to: 1 0 1; delay: 200; dur: 2000"></a-cylinder>
        </a-entity>

        <!-- Blue -->
        <a-entity scale="0.8 0 0.8" animation="property: scale; to: 0.8 1 0.8; delay: 400; dur: 2000">
          <a-cylinder position="0 2 0" radius="2" height="2" color="#4CC3D9" open-ended="true" side="double"
                      scale="1 1.25 1" animation="property: scale; to: 1 0 1; delay: 400; dur: 2000"></a-cylinder>

          <a-cylinder position="0 -2 0" radius="2" height="2" color="#4CC3D9" open-ended="true" side="double"
                      scale="1 1.25 1" animation="property: scale; to: 1 0 1; delay: 400; dur: 2000"></a-cylinder>
        </a-entity>

        <!-- Yellow -->
        <a-entity scale="0.7 0 0.7" animation="property: scale; to: 0.7 1 0.7; delay: 600; dur: 2000">
          <a-cylinder position="0 2 0" radius="2" height="2" color="#FFC65D" open-ended="true" side="double"
                      scale="1 1.25 1" animation="property: scale; to: 1 0 1; delay: 600; dur: 2000"></a-cylinder>

          <a-cylinder position="0 -2 0" radius="2" height="2" color="#FFC65D" open-ended="true" side="double"
                      scale="1 1.25 1" animation="property: scale; to: 1 0 1; delay: 600; dur: 2000"></a-cylinder>
        </a-entity>

        <!-- Purple -->
        <a-entity scale="0.6 0 0.6" animation="property: scale; to: 0.6 1 0.6; delay: 800; dur: 2000">
          <a-cylinder position="0 2 0" radius="2" height="2" color="#93648D" open-ended="true" side="double"
                      scale="1 1.25 1" animation="property: scale; to: 1 0 1; delay: 800; dur: 2000"></a-cylinder>

          <a-cylinder position="0 -2 0" radius="2" height="2" color="#93648D" open-ended="true" side="double"
                      scale="1 1.25 1" animation="property: scale; to: 1 0 1; delay: 800; dur: 2000"></a-cylinder>
        </a-entity>
      </a-entity>

      <!-- Warps 2 -->
      <a-entity position="2 1.5 -6" scale="0 1 0" animation="property: scale; to: 1 1 1; delay: 1000; dur: 2000">
        <!-- Green -->
        <a-entity scale="1 0 1" animation="property: scale; to: 1 1 1; dur: 2000">
          <a-cylinder position="0 2 0" radius="2" height="2" color="#7BC8A4" open-ended="true" side="double"
                      scale="1 40 1" animation="property: scale; to: 1 0 1; dur: 2000"></a-cylinder>

          <a-cylinder scale="1 40 1" position="0 -2 0" radius="2" height="2" color="#7BC8A4" open-ended="true" side="double"
                      animation="property: scale; to: 1 0 1; dur: 2000"></a-cylinder>
        </a-entity>

        <!-- Orange -->
        <a-entity scale="0.9 0 0.9" animation="property: scale; to: 0.9 1 0.9; delay: 200; dur: 2000">
          <a-cylinder position="0 2 0" radius="2" height="2" color="#F16745" open-ended="true" side="double"
                      scale="1 40 1" animation="property: scale; to: 1 0 1; delay: 200; dur: 2000"></a-cylinder>

          <a-cylinder position="0 -2 0" radius="2" height="2" color="#F16745" open-ended="true" side="double"
                      scale="1 40 1" animation="property: scale; to: 1 0 1; delay: 200; dur: 2000"></a-cylinder>
        </a-entity>

        <!-- Blue -->
        <a-entity scale="0.8 0 0.8" animation="property: scale; to: 0.8 1 0.8; delay: 400; dur: 2000">
          <a-cylinder position="0 2 0" radius="2" height="2" color="#4CC3D9" open-ended="true" side="double"
                      scale="1 40 1" animation="property: scale; to: 1 0 1; delay: 400; dur: 2000"></a-cylinder>

          <a-cylinder position="0 -2 0" radius="2" height="2" color="#4CC3D9" open-ended="true" side="double"
                      scale="1 40 1" animation="property: scale; to: 1 0 1; delay: 400; dur: 2000"></a-cylinder>
        </a-entity>

        <!-- Yellow -->
        <a-entity scale="0.7 0 0.7" animation="property: scale; to: 0.7 1 0.7; delay: 600; dur: 2000">
          <a-cylinder position="0 2 0" radius="2" height="2" color="#FFC65D" open-ended="true" side="double"
                      scale="1 40 1" animation="property: scale; to: 1 0 1; delay: 600; dur: 2000"></a-cylinder>

          <a-cylinder position="0 -2 0" radius="2" height="2" color="#FFC65D" open-ended="true" side="double"
                      scale="1 40 1" animation="property: scale; to: 1 0 1; delay: 600; dur: 2000"></a-cylinder>
        </a-entity>

        <!-- Purple -->
        <a-entity scale="0.6 0 0.6" animation="property: scale; to: 0.6 1 0.6; delay: 800; dur: 2000">
          <a-cylinder position="0 2 0" radius="2" height="2" color="#93648D" open-ended="true" side="double"
                      scale="1 40 1" animation="property: scale; to: 1 0 1; delay: 800; dur: 2000"></a-cylinder>

          <a-cylinder position="0 -2 0" radius="2" height="2" color="#93648D" open-ended="true" side="double"
                      scale="1 40 1" animation="property: scale; to: 1 0 1; delay: 800; dur: 2000"></a-cylinder>
        </a-entity>
      </a-entity>

      <a-light type="directional" color="#FFF" intensity="0.2" position="-1 2 1"></a-light>
      <a-light type="ambient" color="#FFF"></a-light>
    </a-scene>
  </body>
</html>
